'use client';

import React from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

interface BoardColumnProps {
  title: string;
  count: number;
  id: string;
  children: React.ReactNode;
}

export default function BoardColumn({ title, count, id, children }: BoardColumnProps) {
  // 获取列的颜色
  const getColumnColor = (columnId: string) => {
    switch (columnId) {
      case 'TODO':
        return 'bg-gray-100';
      case 'IN_PROGRESS':
        return 'bg-blue-50';
      case 'REVIEW':
        return 'bg-amber-50';
      case 'DONE':
        return 'bg-green-50';
      default:
        return 'bg-gray-100';
    }
  };

  return (
    <Card className={`${getColumnColor(id)}`}>
      <CardHeader className="py-3 px-4">
        <div className="flex justify-between items-center">
          <CardTitle className="text-sm font-medium">{title}</CardTitle>
          <Badge variant="secondary" className="text-xs">
            {count}
          </Badge>
        </div>
      </CardHeader>
      <CardContent className="p-3">
        {children}
      </CardContent>
    </Card>
  );
} 